<template>
    <el-scrollbar height="615px">
    <div class="audit">
        <el-card>
            <el-row>
              <el-col :span="14" >
                <span style="font-weight: bold;float: left;">
                    <img :src="feedback.avatar" alt="" style="width: 40px;border-radius: 50%;"><br>
                    <el-tag type="">{{feedback.username}}</el-tag>
                </span>
              </el-col>
              <el-col :span="10">
                <el-button style="float: right;" type="info" @click="goBack" plain :icon="Back">返回</el-button><br><br>
                <el-switch
                    :disabled="$store.state.user.role !== 'ROLE_ADMIN'||feedback.status === true"
                    v-model="feedback.status"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;float: right;"
                    active-text="已处理"
                    inactive-text="处理"
                    @change="disposeStatus"
                />
              </el-col>
            </el-row>
            <el-divider />
            <div v-html="html"></div>
        </el-card>
    </div>
    </el-scrollbar >
</template>
<script>
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {ref,watch} from 'vue'
    import request from '@/utils/request'
    import {Back} from '@element-plus/icons-vue'
    import {ElNotification} from 'element-plus'
    export default{
        name:'AuditContent',
        components:{
        },
        setup() {
            const router = useRouter();
            const store = useStore();
            const icon = {Back}
            let feedback = ref({
                username:'',
                avatar:'',
                status:false
            })
            let html = ref('');
            let id = ref(1)
            watch(() =>router.currentRoute.value.path,(path)=> {
                if(path.length === 8){
                    id.value = path.charAt(path.length - 1)
                }else if(path.length === 9){
                    id.value = path.charAt(path.length - 2) + path.charAt(path.length - 1)
                }
            },{ immediate: true })
            let goBack = () => {
                router.push({
                    path:'/audit'
                })
            }
            let getFeedBackById = () => {
                request({
                    url:'/feedback/getById/',
                    method:'get',
                    params:{
                        id:id.value,
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    html.value = resp.content;
                    feedback.value.username = resp.username;
                    feedback.value.avatar = resp.avatar;
                    if(resp.status === 'false'){
                        feedback.value.status = false; 
                    }else{
                        feedback.value.status = true;
                    }
                }).catch(() => {});
            }
            getFeedBackById()
            let disposeStatus = () => {
                request({
                    url:'/feedback/changeStatus/',
                    method:'post',
                    data:{
                        id:id.value,
                        role:store.state.user.role,
                        status:feedback.value.status,
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    if(resp.message === 'success'){
                        ElNotification({
                            title: 'Success',
                            message: feedback.value.username+'的反馈已处理',
                            type: 'success',
                        })
                    }else{
                        ElNotification({
                            title: 'Error',
                            message: '没有权限',
                            type: 'error',
                        })
                    }
                    getFeedBackById()
                }).catch(() => {});
            }
            return {
                id,
                goBack,
                html,
                feedback,
                ...icon,
                disposeStatus,
            }
        },
    }
</script>
<style>
/* table 样式 */
.audit table {
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
}
.audit table td,
.audit table th {
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
  padding: 3px 5px;
}
.audit table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.audit blockquote {
  display: block;
  border-left: 8px solid #aad3ec;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #dddada;
}

/* code 样式 */
.audit code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.audit pre code {
  display: block;
}

/* ul ol 样式 */
.audit ul, .audit ol {
  margin: 10px 0 10px 20px;
}
</style>